<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div style="width:100%; height:100%">
      <div ref="container"></div>
    </div>
  </j-modal>
</template>

<script>
import { register } from '@antv/x6-vue-shape'
import { Graph } from '@antv/x6'
import BomDetailNode from '@views/production/treeNode/BomDetailNode.vue'
import { getAction } from '@api/manage'

export default {
  name: 'HfShowRoutingTree',
  props: {},
  data() {
    return {
      title: '工艺流程树形图',
      width: 1000,
      visible: false,
      confirmLoading: false,
      initializedGraph: null,
      graphWidth: 1000,
      graphHeight: 200,
      routingId: '',
      mainMaterialCode: '',
      mainMaterialName: '',
      url: {
        list: '/production/hfRouting/listHfRoutingDetailByMainId'
      },
      dataSource: [],
      offsetX: 30
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.initGraph()
          this.initData()
        })
      }
    }
  },
  mounted() {
    register({
      shape: 'custom-vue-node',
      // width: 100,
      // height: 100,
      component: BomDetailNode
    })
  },
  methods: {
    initData() {
      const param = {
        sourceId: this.routingId
      }
      getAction(this.url.list, param)
        .then(res => {
          this.dataSource = res.result.records || res.result
        })
        .then(() => {
          const parentNode = this.initializedGraph.addNode({
            id: this.mainMaterialCode,
            shape: 'custom-vue-node',
            x: this.offsetX,
            y: 100,
            data: {
              color: 'purple',
              materialCode: this.mainMaterialCode,
              materialName: this.mainMaterialName
            }
          })
          this.dataSource.forEach(data => {
            const node = this.initializedGraph.addNode({
              id: data.id,
              shape: 'custom-vue-node',
              x: 400 + this.offsetX,
              y: data.stepOrder * 40,
              data: {
                color: 'blue',
                ...data
              }
            })

            this.initializedGraph
              .addEdge({
                source: {
                  cell: parentNode,
                  anchor: {
                    name: 'topRight',
                    args: {
                      dx: 200,
                      dy: 10
                    }
                  },
                  connectionPoint: 'anchor'
                },
                target: {
                  cell: node,
                  anchor: {
                    name: 'left',
                    args: {
                      dy: 10
                    }
                  },
                  connectionPoint: 'anchor'
                },
                attrs: {
                  line: {
                    stroke: '#8f8f8f',
                    strokeWidth: 1
                  }
                }
              })
              .appendLabel({
                attrs: {
                  text: {
                    text: `${data.stepOrder}.${data.stepId_dictText}`
                  }
                }
              })
          })

          // 根据数量重新设置宽度
          const newHeight =
            this.dataSource.length * 50 < this.graphHeight ? this.graphHeight : this.dataSource.length * 50
          this.initializedGraph = this.initializedGraph.resize(this.graphWidth, newHeight)
        })
    },
    initGraph() {
      this.initializedGraph = new Graph({
        container: this.$refs.container,
        width: this.graphWidth,
        height: this.graphHeight
      })
    },
    handleOk() {
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    }
  }
}
</script>

<style scoped></style>
